<template>
    <div class="system-common-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="569px">
            <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">

                <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="手机号码" prop="hourlyLimit">
                            <el-input v-model="state.phone" placeholder="请输入手机号码" clearable
                                      maxlength='11'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="">
                            <el-button size="default" type="primary" class="ml10" @click="queryPhone()">
                                <el-icon>
                                    <ele-Promotion/>
                                </el-icon>
                                发送短信
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="响应信息" prop="remark">
                            <el-input type="textarea" v-model="state.sendInformation" placeholder="" multiline
                                      style="word-break: break-all;" :autosize="{ minRows: 2 }"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="验 证 码" prop="hourlyLimit">
                            <el-input v-model="state.verifyCode" placeholder="请输入验证码" minlength='6' maxlength='6'
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="">
                            <el-button size="default" type="primary" class="ml10" @click="queryCode()">
                                <el-icon>
                                    <ele-Promotion/>
                                </el-icon>
                                回填验证码
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="响应信息" prop="remark">
                            <el-input type="textarea" v-model="state.verifyCodeInformation" placeholder="" multiline
                                      style="word-break: break-all;" :autosize="{ minRows: 2 }"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">关 闭</el-button>
				</span>
            </template>
        </el-dialog>


    </div>
</template>

<script setup lang="ts" name="testEsProductChannelDialog">

import {reactive, ref} from 'vue';
import {EsProductChannel} from "/@/api/models";
import SysEsProductChannelApi from '/@/api/exocytosis/productChannel';
import {ElMessage} from "element-plus";

// 定义变量内容
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const ruleFormRef = ref();
const state = reactive({
    ruleForm: {} as EsProductChannel,
    rules: {
        phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
    },
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitText: '',
    },
    phone: '',
    verifyCode: '',
    sendInformation: '',
    verifyCodeInformation: '',
});

// 打开弹窗
const openDialog = (row: EsProductChannel) => {
    state.ruleForm = row;
    state.dialog.title = '测试：' + row.productName + ' > ' + row.channelName;
    state.dialog.submitText = '测 试';
    state.sendInformation = '';
    state.verifyCodeInformation = '';
    state.verifyCode = '';
    state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
    emit('refresh');
    state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
    closeDialog();
};

const queryPhone = async () => {
    if (!state.phone) {
        ElMessage.error('请输入手机号码');
        return;
    }
    state.sendInformation = "下发验证码......";
    // 组装参数
    let queryParams = {
        mobile: state.phone,
        key: state.ruleForm.code,
        cpparam: "TEST",
        ip: "8.8.8.8",
        adsource: "%E5%85%B6%E4%BB%96",
        ua: "Mozilla%2F5.0%20%28Linux%3B%20",
        adapp: "com.tellme.tt"
    };
    await SysEsProductChannelApi().sendCode(queryParams).then(res => {
        state.sendInformation = JSON.stringify(res.data);
        state.verifyCodeInformation = '';
        state.verifyCode = '';
    });
};

const queryCode = async () => {
    let serial = JSON.parse(state.sendInformation);
    if (!serial || !serial.data) {
        state.verifyCode = '';
        ElMessage.error('获取验证码失败，请重新<发送短信>');
        return;
    }
    // 组装参数
    let queryParams = {
        linkid: serial.data.linkid,
        smscode: state.verifyCode
    };
    await SysEsProductChannelApi().submit(queryParams).then(res => {
        state.verifyCodeInformation = JSON.stringify(res.data)
    });
};

// 导出对象
defineExpose({
    openDialog,
});
</script>
